<!DOCTYPE html>
<html>
<head>
	<title>Angular DEMO 4</title>
	<link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
	<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
	<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
	<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
	<style type="text/css">
.text-warning{
	color:red;
}
	</style>
</head>
<body ng-app="app" >
	<div class="container" ng-controller="Demo4Ctrl">
		<div class="row">
			<p>Remaining:<span ng-class="{'text-warning':shoudWarn()}" ng-bind="remain()"></span></p>
			<textarea ng-model="text">{{text}}</textarea> 
		</div>
		<div class="row">
			<button ng-disabled="!hasValidLength()" class="btn btn-primary" ng-click="send()">Send</button>
			<button class="btn btn-warning" ng-click="clear()">Clear</button>
		</div>
	</div>	
	<script>
	angular.module('app',[])
	.controller('Demo4Ctrl',['$scope',function($scope){
		$scope.text="";
		var MAX_LENGTH=20;
		var WARN_THRESHOLD = 5;
		$scope.remain = function(){
			return MAX_LENGTH - $scope.text.length;
		};
		$scope.hasValidLength=function(){
			return $scope.text.length<=MAX_LENGTH;
		};
		$scope.shoudWarn=function(){
			return $scope.remain()<WARN_THRESHOLD;
		}
	}]);
	</script>
</body>
</html>